<template>
  <div class="store-edit">
    <div class="v-title">{{ isSeller ? "卖家中心" : "买家中心" }}</div>
    <a-form-model
      :model="model"
      ref="form"
      :rules="rules"
      :label-col="{ span: 3 }"
      :wrapper-col="{ span: 12 }"
      @submit="onSubmit"
      :colon="false"
    >
      <a-form-model-item label="订单状态" v-if="model.ID">
        <div>{{ model.status | status }}</div>
      </a-form-model-item>
      <a-form-model-item label="项目名称" prop="projectId">
        <a-select
          v-model="model.projectId"
          placeholder="请选择项目"
          :disabled="isSeller"
        >
          <a-select-option
            v-for="item in this.account.user_project"
            :value="item.ID"
            :key="item.ID"
          >
            {{ item.proName }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="采购清单" prop="name">
        <a-input
          v-model="model.name"
          placeholder="请输入采购清单"
          :disabled="isSeller"
        />
      </a-form-model-item>

      <a-form-model-item label="自有采购单编号" prop="userSn">
        <a-input
          v-model="model.userSn"
          placeholder="请输入自有采购单编号"
          :disabled="isSeller"
        />
      </a-form-model-item>

      <a-form-model-item label="意向供应企业" prop="sellerId">
        <a-select
          v-model="model.sellerId"
          :filter-option="filterOption"
          :disabled="isSeller"
          show-search
          placeholder="请选择意向供应企业"
          option-filter-prop="children"
        >
          <a-select-option
            v-for="item in storeList"
            :value="item.ID"
            :key="item.name"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>

        <div class="tips">
          若您有已经商谈好意向供应商在此选择。否则可以留空，平台审核后会跟您联系。您也可以直接联系我们客服。
        </div>
      </a-form-model-item>
      <a-divider orientation="left">
        采购材料需求清单
      </a-divider>

      <a-button
        type="primary"
        style="margin-left: 8px"
        @click="addOrder"
        v-if="!isSeller"
      >
        新增清单
      </a-button>

      <a-table
        style="margin: 20px 0;"
        :columns="columns"
        :bordered="false"
        :pagination="false"
        :data-source="model.user_order_detail"
        rowKey="ID"
      >
        <a-select
          :value="record.cWork"
          slot="cWork"
          slot-scope="text, record"
          style="width: 80px"
          :disabled="isSeller"
          @change="id => handleWorkChange(id, record)"
        >
          <a-select-option
            v-for="item in config.c_types"
            :value="item.ID"
            :disabled="isSeller"
            :key="item.name"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>

        <a-select
          v-model="record.cProduct"
          slot="cProduct"
          slot-scope="text, record"
          :disabled="isSeller"
          style="width: 80px"
        >
          <a-select-option
            v-for="item in record.currentProduct"
            :value="item.ID"
            :key="item.name"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>

        <a-input
          v-model="record.brand"
          slot="brand"
          :disabled="isSeller"
          slot-scope="text, record"
        />

        <a-input
          v-model="record.name"
          slot="name"
          :disabled="isSeller"
          slot-scope="text, record"
        />

        <a-input
          v-model="record.norms"
          slot="norms"
          :disabled="isSeller"
          slot-scope="text, record"
        />

        <a-input-group
          compact
          slot="buyNumber"
          :disabled="isSeller"
          slot-scope="text, record"
        >
          <a-input
            style="width: 50%"
            v-model="record.buyNumber"
            placeholder="数值"
          />
          <a-input
            style="width: 30%"
            v-model="record.unit"
            placeholder="单位"
          />
        </a-input-group>

        <a-input-number
          v-model="record.perPrice"
          slot="perPrice"
          :disabled="!isSeller"
          slot-scope="text, record"
        />

        <div
          slot="action"
          slot-scope="text, record"
          v-if="model.status == 1 || model.status == 2"
        >
          <a @click="removeOrder(record)">删除</a>
        </div>
      </a-table>

      <a-divider orientation="left">
        整体采购要求
      </a-divider>

      <a-form-model-item label="收货地址">
        <a-input
          placeholder="收货地址"
          v-model="model.getAddress"
          :disabled="isSeller"
        />
      </a-form-model-item>

      <a-form-model-item label="采购说明">
        <a-textarea
          placeholder="您可以填写更多补充说明，如试样、机械性能要求、用途和表面要求等"
          v-model="model.desc"
          :disabled="isSeller"
        />
      </a-form-model-item>

      <a-form-model-item label="上传相关资料">
        <Upload
          v-model="model.descPic"
          text="上传相关资料"
          :disabled="isSeller"
        />
      </a-form-model-item>

      <a-form-model-item label="收货日期">
        <a-date-picker
          @change="handleDateChange"
          :value="model.getDate"
          :disabled="isSeller"
        ></a-date-picker>
      </a-form-model-item>

      <a-form-model-item label="交易方式">
        <a-radio-group
          name="radioGroup"
          v-model="model.payType"
          :disabled="isSeller"
        >
          <a-radio value="1">
            项目信用支付
          </a-radio>
          <a-radio value="2">
            自有资金现款现货
          </a-radio>
          <a-radio value="3">
            其他
          </a-radio>
        </a-radio-group>
      </a-form-model-item>

      <a-form-model-item label="是否含税">
        <a-radio-group
          name="radioGroup"
          v-model="model.buType"
          :disabled="isSeller"
        >
          <a-radio value="1">
            报价含税
          </a-radio>
          <a-radio value="2">
            报价不含税
          </a-radio>
        </a-radio-group>
      </a-form-model-item>

      <a-divider orientation="left">
        买方联系信息
      </a-divider>

      <a-form-model-item label="采购企业联系人">
        <a-input v-model="model.buyContaxt" :disabled="isSeller" />
      </a-form-model-item>

      <a-form-model-item label="手机号">
        <a-input v-model="model.buyPhone" :disabled="isSeller" />
      </a-form-model-item>

      <a-form-model-item
        label="采购方合同"
        v-if="model.status != 1 && model.status != 2"
      >
        <Upload
          v-model="model.buyContract"
          text="上传合同"
          :disabled="isSeller"
        />
      </a-form-model-item>

      <template v-if="model.status != 1 && model.status != 2">
        <a-divider orientation="left">
          供应方信息
        </a-divider>

        <a-form-model-item label="供应企业">
          <a-input
            :value="getStoreNameById(model.sellerId)"
            :disabled="!isSeller"
          />
        </a-form-model-item>

        <a-form-model-item label="供应企业联系人">
          <a-input v-model="model.sellContaxt" :disabled="!isSeller" />
        </a-form-model-item>

        <a-form-model-item label="供应企业联系手机号">
          <a-input v-model="model.sellPhone" :disabled="!isSeller" />
        </a-form-model-item>

        <a-form-model-item label="供应企业备注">
          <a-input v-model="model.sellDesc" :disabled="!isSeller" />
        </a-form-model-item>

        <a-form-model-item label="供应企业合同">
          <Upload
            v-model="model.sellContract"
            text="上传合同"
            :disabled="!isSeller"
          />
        </a-form-model-item>
      </template>

      <template
        v-if="model.status == 6 || model.status == 7 || model.status == 8"
      >
        <a-divider orientation="left">
          采购方信息
        </a-divider>

        <a-form-model-item label="采购方收货凭证">
          <UploadMul
            v-model="model.user_order_get_pic"
            text="采购方收货凭证"
            :disabled="isSeller"
            isObject
          />
        </a-form-model-item>

        <a-divider orientation="left">
          供应企业信息
        </a-divider>

        <a-form-model-item label="供应企业发货凭证">
          <UploadMul
            v-model="model.user_order_send_pic"
            text="供应企业发货凭证"
            :disabled="!isSeller"
            isObject
          />
        </a-form-model-item>
      </template>

      <a-form-model-item label=" ">
        <div class="action-wrapper">
          <a-button
            style="margin-right: 20px;"
            size="large"
            @click="$router.go(-1)"
          >
            取消
          </a-button>
          <a-button type="primary" size="large" htmlType="submit">
            提交审核
          </a-button>
        </div>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import Upload from "@/components/upload/Upload";
import UploadMul from "@/components/upload/UploadMul";
import { getStoreList, createOrder } from "@/api/account";
import storage from "@/utils/storage";
import moment from "moment";

const columns = [
  {
    title: "行业",
    dataIndex: "cWork",
    scopedSlots: { customRender: "cWork" },
    align: "center"
  },
  {
    title: "品类名",
    dataIndex: "cProduct",
    scopedSlots: { customRender: "cProduct" },
    align: "center"
  },
  {
    title: "品牌或厂家",
    dataIndex: "brand",
    scopedSlots: { customRender: "brand" },
    align: "center"
  },
  {
    title: "商品名称",
    dataIndex: "name",
    scopedSlots: { customRender: "name" },
    align: "center"
  },
  {
    title: "规格或型号",
    dataIndex: "norms",
    scopedSlots: { customRender: "norms" },
    align: "center"
  },
  {
    title: "采购量",
    dataIndex: "buyNumber",
    scopedSlots: { customRender: "buyNumber" },
    align: "center"
  },
  {
    title: "单价",
    dataIndex: "perPrice",
    scopedSlots: { customRender: "perPrice" },
    align: "center"
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" },
    align: "center"
  }
];

export default {
  components: {
    Upload,
    UploadMul
  },
  data() {
    return {
      columns,
      list: [],
      storeList: [],
      model: {
        buType: "1", //报价形式
        buyContaxt: "", //采购企业联系人
        buyContract: "", //采购方合同图片
        buyId: "", //买家ID
        buyPhone: "", //买家联系电话
        desc: "", //采购说明
        descPic: "", //采购说明图片
        getAddress: "", //收货地区
        getDate: "", //收货日期
        isPublic: true, //是否发布到求购大厅
        name: "", //采购清单名称
        orderSn: "", //平台订单号
        payType: "1", //交易方式
        projectId: "", //项目ID
        sellContaxt: "", //供应企业联系人
        sellContract: "", //供应企业合同图片
        sellDesc: "", //供应企业备注
        sellPhone: "", //sell_phone
        sellerId: "", //卖家ID
        status: 1, //1待审核。2驳回。3待报价，双方上传合同。4待合同审核。5待平台上传付款凭证。6待双方上传收发货凭证。8完整订单
        userSn: "", //自有采购单编号
        user_order_get_pic: [],
        user_order_send_pic: [],
        user_order_detail: [
          {
            brand: "", //brand
            buyId: undefined, //买家ID
            sellerId: undefined, //卖家ID
            buyNumber: undefined, //购买数量
            cProduct: undefined, //品类名
            cWork: undefined, //行业
            name: undefined, //商品名称
            norms: undefined, //规格或型号
            perPrice: undefined, //单价(元)
            unit: "", //单位,
            currentProduct: []
          }
        ]
      }
    };
  },
  computed: {
    rules() {
      return {};
    },
    isSeller() {
      return this.$route.query.type == "seller";
    }
  },
  filters: {
    status(val) {
      const statusOptions = [
        {
          value: 1,
          label: "待审核"
        },
        {
          value: 2,
          label: "驳回"
        },
        {
          value: 3,
          label: "待报价，双方上传合同"
        },
        {
          value: 4,
          label: "待合同审核"
        },
        {
          value: 5,
          label: "待平台上传付款凭证"
        },
        {
          value: 6,
          label: "双方上传收发货凭证"
        },
        {
          value: 7,
          label: "待平台收发货凭证审核"
        },
        {
          value: 8,
          label: "订单完成"
        }
      ];

      for (const item of statusOptions) {
        if (item.value == val) {
          return item.label;
        }
      }

      return "";
    }
  },
  mounted() {
    if (this.$route.query.id) {
      const data = storage.getItem("ORDERS_ITEM") || { user_order_detail: [] };

      data.user_order_detail.map(item => {
        this.handleWorkChange(item.cWork, item, false);

        return item;
      });

      this.model = data;
      this.model.getDate = moment(this.model.getDate);
    }
    this.getStoreList();
  },
  methods: {
    getStoreNameById(id) {
      let name = "";

      for (const item of this.storeList) {
        if (item.ID == id) {
          name = item.name;
        }
      }

      return name;
    },
    addOrder() {
      this.model.user_order_detail.push({
        brand: "", //brand
        buyId: undefined, //买家ID
        sellerId: undefined, //卖家ID
        buyNumber: undefined, //购买数量
        cProduct: undefined, //品类名
        cWork: undefined, //行业
        name: undefined, //商品名称
        norms: undefined, //规格或型号
        perPrice: undefined, //单价(元)
        unit: "千克", //单位,
        currentProduct: []
      });
    },
    removeOrder(record) {
      if (this.model.user_order_detail.length <= 1) {
        this.$message.info("至少有一条需求清单");
        return;
      }
      const index = this.model.user_order_detail.findIndex(
        item => item === record
      );

      this.model.user_order_detail.splice(index, 1);
    },
    handleWorkChange(id, record) {
      if (record.cWork != id) {
        record.cWork = id;
        record.cProduct = "";
      }

      for (const item of this.config.c_types) {
        if (record.cWork == item.ID) {
          record.currentProduct = item.c_types;
        }
      }
    },
    handleDateChange(item) {
      this.model.getDate = item.format("YYYY-MM-DD HH:mm:ss");
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    async getStoreList() {
      const res = await getStoreList({ applyStatus: 3 });
      this.storeList = res.data.list;
    },
    async onSubmit(e) {
      e.preventDefault();
      let flag = true;
      if (!this.isSeller) {
        this.model.buyId = this.account.ID;
        this.model.user_order_detail.map(item => {
          item.buyId = this.account.ID;
          item.sellerId = this.model.sellerId;
          item.buyNumber = Number(item.buyNumber);
        });
      }
      if (
        this.model.status == 3 &&
        this.model.buyContract &&
        this.model.sellContract
      ) {
        // eslint-disable-next-line no-empty
        for (let i = 0; i < this.model.user_order_detail.length; i++) {
          if (this.model.user_order_detail[i].perPrice === 0) {
            flag = false;
          }
        }
      } else {
        flag = false;
      }
      if (this.model.status == 3 && flag) {
        this.model.status = 4;
      }
      await createOrder(this.model);
      this.$message.info("发布材料采购");
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="less" scoped>
.store-edit {
  background: @white;
  padding: 20px 0 20px 20px;

  .v-title {
    margin: 0 0 20px;
  }

  .tips {
    color: @text-color-2;
    line-height: 1.6;
    margin-top: 8px;
  }
}
</style>
